<html>
   <head>
      <title>Click-and-response!</title>
      <script type="text/javascript" src="7227ClickAndResponseInterface.js"></script>
   </head>
   <body onload='Initialize();'>
      <div style="width: 1024px; height: 768px; position: absolute; top: 0px; left: 0px;">
         <div style="background-color: #FFFF00; position: absolute; width: 24px; height: 24px; left: 60px; top: 70px; border-style: dashed; border-color: #7F7F00; text-align: center; line-height: 24px" id="YBox01">1</div>
         <div style="background-color: #FFFF00; position: absolute; width: 24px; height: 24px; left: 60px; top: 70px; border-style: dashed; border-color: #7F7F00; text-align: center; line-height: 24px" id="YBox02">2</div>
         <div style="background-color: #FFFF00; position: absolute; width: 24px; height: 24px; left: 60px; top: 70px; border-style: dashed; border-color: #7F7F00; text-align: center; line-height: 24px" id="YBox03">3</div>
         <div style="background-color: #FFFF00; position: absolute; width: 24px; height: 24px; left: 60px; top: 70px; border-style: dashed; border-color: #7F7F00; text-align: center; line-height: 24px" id="YBox04">4</div>
         <div style="background-color: #FFFF00; position: absolute; width: 24px; height: 24px; left: 60px; top: 70px; border-style: dashed; border-color: #7F7F00; text-align: center; line-height: 24px" id="YBox05">5</div>
         <div style="background-color: #FFFF00; position: absolute; width: 24px; height: 24px; left: 60px; top: 70px; border-style: dashed; border-color: #7F7F00; text-align: center; line-height: 24px" id="YBox06">6</div>
         <div style="background-color: #FFFF00; position: absolute; width: 24px; height: 24px; left: 60px; top: 70px; border-style: dashed; border-color: #7F7F00; text-align: center; line-height: 24px" id="YBox07">7</div>
         <div style="background-color: #FFFF00; position: absolute; width: 24px; height: 24px; left: 60px; top: 70px; border-style: dashed; border-color: #7F7F00; text-align: center; line-height: 24px" id="YBox08">8</div>
         <div style="background-color: #FFFF00; position: absolute; width: 24px; height: 24px; left: 60px; top: 70px; border-style: dashed; border-color: #7F7F00; text-align: center; line-height: 24px" id="YBox09">9</div>
         <div style="background-color: #FFFF00; position: absolute; width: 24px; height: 24px; left: 60px; top: 70px; border-style: dashed; border-color: #7F7F00; text-align: center; line-height: 24px" id="YBox10">0</div>
      </div>
      <div style="width: 1024px; height: 768px; position: absolute; top: 0px; left: 0px; border-color:#000000; border-style:solid" id="Interface" ondragstart="return false" onmouseover="this.focus()" tabindex="1" onmousemove="mouseclick(event)"></div>
      <div style="width: 400px; height: 768px; position: absolute; top: 0px; left: 1050px; border-color:#FF0000; border-style:dashed; background-color:#00FF00;" id="MessagePanel">
         Log message panel<br />
      </div>
   </body>
</html>
